<template>
	<div class="u-page u-general-color">
		<div class="u-pl-10 u-pr-10">
			<div class="search-width u-pt-10 u-pb-10">
				<u-search :show-action="false" :clearabled="true" shape="square" bg-color="#fff" height="70"
					placeholder="请输入关键字" v-model="searchStr" @search="search"></u-search>
			</div>
			<div v-if="evaluationList.length > 0" v-for="(item, index) in evaluationList" :key="index"
				@click="routePage(item)">
				<div class="u-flex u-row-between u-col-center u-mb-5 u-pt-10 u-pl-10 u-pr-10 sample-item">
					<u-avatar :src="getPicture(item)" size="160" mode="square"></u-avatar>
					<div class="u-col-center u-flex-1 u-pl-10">
						<div class="sample-item-top">
							<div class="u-title sample-item-title">
								<span class="goods-title-tag" v-if="item.label">{{item.label}}</span>
								<span>{{item.subject}}</span>
							</div>
							<div class="color-red u-fz-18 u-font-bold">{{getMax(item)}}</div>
							<!-- <div class="color-red u-fz-18 u-font-bold" v-if="item.enableRating == '1'">{{getMax(item)}}</div>
							<div class="color-red u-fz-18 u-font-bold" v-else>{{item.reward?item.reward:'暂无'}}</div> -->
						</div>
						<div class="u-number" @longpress='longpressCopy(item.taskNumber,"编号已复制")'>编号
							：{{item.taskNumber}}</div>
						<div class="u-number">发起人 ：{{item.initiatorName}}</div>
						<div class="sample-item-bottom">
							<div class="u-cl-content u-fz-14">
								{{item.createTime?item.createTime:''}}
							</div>
							
							<!-- 任务状态。0:正常结束(到期自动结束)；1:正在进行中；2:报名结束；3:活动作废(手动结束) -->
							<div @click.stop="wakeShareModule(item, index)" v-if="item.taskStatus == '1'">
								<u-icon name="zhuanfa" color="#9d9d9d" size="35"></u-icon>
							</div>
							<div v-if="item.taskStatus == '0'">
								<div class="u-fz-13" style="color: #bcbcbc;">已结束</div>
							</div>
							<div v-if="item.taskStatus == '3'">
								<div class="u-fz-13" style="color: #bcbcbc;">已作废</div>
							</div>
						</div>
						<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
							:style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"
							btnText="活动海报" @successCallBack="shareSuccessCallBack" ref="shareModule"></ShareBtn>
					</div>
				</div>
			</div>
			<div class="u-border-top" v-else>
				<div class="u-text-center" style="padding-top: 20%;">
					<u-empty text="暂无数据" mode="data"></u-empty>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				form: {},
				evaluationList: [],
				pageNum: 1,
				pageSize: 10,
				searchStr: '',
				background: {
					backgroundColor: '#f3e4e9',
				},
				shareData: {
					docUnid: '',
					url: '',
					route: '',
					style: 9,
					type: 2,
					btnText: '活动海报',
					posterData: {
						imageURL: '', // 商品主图URL地址
						productName: '', // 商品名称
						productPrice: '', // 测评报酬。如：50-100测评报酬
						invitemsg: '邀请您参与活动', // 邀请内容。可不传，默认邀请
						type: 'yphd'
					},
					imageUrl: '',
					shareTitle: ''
				},
				selectGoods: {}, // 记录点击的商品
			}
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getEvaluationList()
			// 停止Loading
			uni.stopPullDownRefresh();
		},

		onReachBottom() {
			this.pageNum += 1
			this.getEvaluationList()
		},

		onLoad(option) {
			// 未登录跳转到登录页面
			this.checkLogin();

			this.getEvaluationList()
		},

		methods: {

			/** 
			 * 获取测评发放列表数据
			 */
			async getEvaluationList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/evaluation/task/page/list",
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.searchStr,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.pageNum != 1) {
						this.evaluationList = this.evaluationList.concat(result.rows)
					} else {
						this.evaluationList = result.rows
					}
				}
			},

			/** 
			 * 搜索
			 */
			search() {
				this.pageNum = 1
				this.getEvaluationList()
			},
			
			/**
			 * 获取首图
			 * @param {Object} item
			 */
			getPicture(item){
				// 活动主图（发起人上传的）
				if (this.isNotNull(item.mainPicture)) {
					return item.mainPicture.split(',')[0];
					
				} else {
					// 商品图
					if (this.isNotNull(item.goodsImages)) {
						return item.goodsImages.split(',')[0];
					}
				}
			},
			
			/**
			 * 获取最高报酬
			 * @param {Object} item
			 */
			getMax(item){
				if(item.enableRating == '1'){
					return Math.max(parseFloat(item.levelAReward), parseFloat(item.levelBReward), parseFloat(item.levelCReward))
				} else if(item.enableRating == '0'){
					return parseFloat(item.reward);
				} else {
					return '暂无';
				}
			},

			/** 
			 * 跳转报名页面
			 */
			routePage(item) {
				this.$u.route('/pages_private_scene1/evaluation/sign_up?docUnid=' + item.id + '&isCreator=true')
			},


			/**
			 * 唤起分享组件弹出
			 */
			async wakeShareModule(item, index) {
				
				// 记录点击的商品
				this.selectGoods = item;
				
				// 计算测评报酬
				let maxPrice = 0;
				
				// 是否评级发放报酬。0:否；1:是；默认1
				if(item.enableRating == "1"){
					maxPrice = Math.max(item.levelAReward, item.levelBReward, item.levelCReward);
				} else {
					maxPrice = parseFloat(item.reward);
				}
				
				// 分享组件数据初始化--发起人视角
				let imageUrl = "";
				if(this.isNotNull(item.mainPicture)){
					imageUrl = item.mainPicture;
				} else {
					imageUrl = item.goodsImages.split(",")[0];
				}
				this.shareData.docUnid = item.id;
				this.shareData.url = '/pages_private_scene1/evaluation/sign_up?docUnid=' + item.id;
				this.shareData.route = this.getCurrentPageUrl(this);
				this.shareData.posterData.imageURL = imageUrl;
				this.shareData.posterData.productName = item.subject;
				this.shareData.posterData.productPrice = maxPrice;
				this.shareData.imageUrl = imageUrl;
				this.shareData.shareTitle = '最高报酬¥' + maxPrice
											+ '！名额' + (item.remainQuota?item.remainQuota:0)
											+ '！' + (item.goodsName?item.goodsName:'')
											
				this.$refs.shareModule[index].wakeUpPop();
			
			},

			/**
			 * 分享回调函数
			 */
			async shareSuccessCallBack(obj) {
				console.log("**************************");
				console.log("开始执行，分享回调函数...");
				console.log("obj=", obj);
				// 保存分享次数
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/behavior/statistics/update",
					createUser: userInfo.userId,
					createUserName: userInfo.nickName,
					createUserAvatar: userInfo.avatarUrl,
					behaviorId: this.selectGoods.goodsId,
					behaviorName: this.selectGoods.goodsName,
					behaviorType: '1', // 分享
					sourceId: obj.NewId, // 分享记录唯一id
					sourceType: '2', // 样品
					remark: '',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				console.log(result);
				console.log("分享回调函数，执行成功！");
				console.log("**************************");
			},
		}

	};
</script>

<style scoped>
	.work-task-li {
		padding: 30rpx 20rpx;
	}

	/* 限制需求列表标题的长度 */
	.job-name {
		width: 350rpx;
		height: 50rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.u-title {
		color: #585757;
		width: 445rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.u-number {
		width: 445rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.u-price-left {
		display: inline-block;
	}

	.u-price-right {
		display: inline-block;
		width: 100rpx;
		height: 30rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		background-color: #e55e97;
		color: #ffffff;
		font-weight: 200;
		/* display: flex; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.share-link {
		margin-left: 40rpx;
		display: inline-block;
		width: 100rpx;
		height: 30rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		background-color: #e55e97;
		color: #ffffff;
		font-weight: 200;
		/* display: flex; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.u-price {
		font-size: 40rpx;
		color: #f02323;
		width: 232rpx;
		height: 50rpx;
		line-height: 40rpx;
		text-align: -webkit-right;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: clip;
		// display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.color-red {
		color: red;
	}

	.sample-item {
		background-color: #ffffff;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}

	.sample-item-title {
		width: 360rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sample-item-bottom {
		display: flex;
		justify-content: space-between;
	}

	.sample-item-top {
		display: flex;
		justify-content: space-between;
		line-height: 55rpx;
	}

	.goods-title-tag {
		color: #ffffff;
		background-color: #fc545d;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 3rpx;
		font-weight: 350;
		padding: 2rpx 10rpx;
		margin-right: 3rpx;
	}
</style>